<template>
  <q-page>
    <div class="container">
      <q-uploader class="full-width q-mb-md"
                  label="Upload your video"
                  field-name="videoFile"
                  url="api/account/upload/video"
                  method="post"
                  :headers="[{name: 'Authorization', value: getToken('access')}]"
                  accept=".mp4"
                  :max-file-size="1024 * 1024 * 512"
                  with-credentials
                  auto-upload
                  @uploading="onVideoUploadingEvent"
                  @uploaded="onVideoUploadedEvent"/>
      <div v-if="status.isUploading || status.isUploaded">
        <q-form @submit="submit">
          <q-uploader class="full-width q-mb-md"
                      label="Upload your cover"
                      field-name="imageFile"
                      url="api/account/upload/image"
                      method="post"
                      :headers="[{name: 'Authorization', value: getToken('access')}]"
                      accept="image/jpeg, image/png"
                      :max-file-size="1024 * 1024 * 2"
                      with-credentials
                      auto-upload
                      @uploading="onCoverUploadingEvent"
                      @uploaded="onCoverUploadedEvent"/>
          <q-input class="q-mb-md"
                   label="Title"
                   v-model="form.title"
                   :rules="[
                     val => val.length > 0 || 'Title cannot be empty!'
                   ]"/>
          <q-input class="q-mb-md"
                   type="textarea"
                   label="Description"
                   v-model="form.description"
                   :rules="[
                     val => val.length > 0 || 'Description cannot be empty!'
                   ]"/>
          <q-btn class="full-width" color="primary" type="submit" label="Upload"/>
        </q-form>
      </div>
    </div>
  </q-page>
</template>

<script>
  import {Account, getToken} from 'src/lib/Account';

  export default {
    name: "Upload",
    data: function () {
      return {
        form: {
          videoName: null,
          coverName: null,
          title: '',
          description: ''
        },
        status: {
          isUploading: false,
          isUploaded: false
        }
      };
    },
    methods: {
      getToken,
      onVideoUploadingEvent() {
        this.status.isUploading = true;
        this.status.isUploaded = false;
      },
      onVideoUploadedEvent(info) {
        try {
          let data = JSON.parse(info.xhr.responseText);
          if (!data.status) throw new Error(data.error);
          this.form.videoName = data.fileName;
        } catch (e) {
          this.$q.notify({
            message: 'Error',
            caption: e.message,
            icon: 'clear'
          })
        }
        this.status.isUploading = false;
        this.status.isUploaded = true;
      },
      onCoverUploadingEvent() {
      },
      onCoverUploadedEvent(info) {
        try {
          let data = JSON.parse(info.xhr.responseText);
          if (!data.status) throw new Error(data.error);
          this.form.coverName = data.fileName;
        } catch (e) {
          this.$q.notify({
            message: 'Error',
            caption: e.message,
            icon: 'clear'
          })
        }
      },
      async submit() {
        this.$q.loading.show();
        try {
          if (!this.form.videoName) throw new Error('Please select a video file.');
          else if (!this.form.coverName) throw new Error('Please select a cover image file.');
          else {
            let data = await Account.uploadVideo(
              this.form.videoName,
              this.form.coverName,
              this.form.title,
              this.form.description);
            await this.$router.push(`/video/${data.vid}`);
          }
        } catch (e) {
          this.$q.notify({
            message: 'Error',
            caption: e.message,
            icon: 'clear'
          })
        }
        this.$q.loading.hide();
      }
    }
  }
</script>

<style scoped>

</style>
